import React, { useEffect } from 'react'
import { Button, Row, Col } from 'antd'
import { connect } from 'umi'
import SkinCard from './SkinCard'

type Props = {
  hero: any,
  dispatch: any
}

function HeroSkin({ hero, dispatch }: Props) {
  const { skins } = hero
  const addSkin = () => {
    dispatch({ type: "hero/addSkin" })
  }
  useEffect(() => {
    dispatch({ type: "hero/clear", action: "skins" })
  }, [])
  return (
    <div>
      <Button type="primary" onClick={addSkin}> + 添加皮肤</Button>
      <Row>
        {
          skins.map((item: any, index: number) => {
            return <Col span={12} key={index}>
              <SkinCard index = { index } name = {item.name}/>
            </Col>
          })
        }
      </Row>
    </div>
  )
}

const mapStateToProps = (state: any) => {
  const { hero } = state
  return {
    hero
  }
}

export default connect(mapStateToProps)(HeroSkin)